<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				height: 100%;
			}
			*{
				padding: 0;
				margin: 0;
			}
			.workpage_nav {
				width: 100%;
				height: 56px;
				border-bottom: 1px solid darkgrey;
			}

			.workpage_navlogo {
				width: 132px;
				height: 40px;
				margin-left: 24px;
				margin-top: 8px;
				float: left;
			}

			.workpage_navbar {
				width: 460px;
				height: 48px;
				float: left;
				margin-left: 25%;
				padding-top: 8px;
			}

			.workpage_navbar .workpage_navbar1 {
				width: 460px;
				height: 56px;
				float: left;
			}

			.workpage_navbar .workpage_navbar1 li {
				list-style: none;
				width: 72px;
				height: 56px;
				color: black;
				text-align: center;
				float: left;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: 500;
				line-height: 36px;
			}

			.workpage_navbar1 a {
				text-decoration: none;
				color: black;
				float: left;
			}

			.workpage_navbar .workpage_navbar1 .workpage_navbar2 {
				color: #1464ff;
				float: left;
			}

			.workpage_navinf {
				width: 490px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				float: right;
				padding-top: 10px;
			}

			.workpage_navinf1 {
				list-style: none;
				text-align: center;
				position: relative;
				float: right;
			}

			.workpage_navinf1 li {
				list-style: none;
				width: 110px;
				height: 32px;
				color: black;
				text-align: center;
				float: right;
				font-family: PingFang SC;
				font-size: 12px;
				line-height: 32px;
			}

			.workpage_navinf1 img {
				max-width: 32px;
				max-height: 32px;
			}
			#img_box {
				float: left;
			}

			#img_span {
				background: url(img/workpage_cloud.png);
				background-repeat: no-repeat;
				background-position: 10px;
				text-align: right;
				font-weight: bold;
				float: left;
			}

			#workpage_text {
				color: lawngreen;
			}

			#workpage_left {
				width: 320px;
				height: 744px;
				float: left;
			}

			#workpage_lefttop span {
				width: 320px;
				height: 40px;
				background: url(img/workpage_lefttop.png) no-repeat;
				background-size: 24px;
				color: dodgerblue;
				padding: 0px 0px 0px 60px;
				margin-top: 16px;
				margin-left: 24px;
				font-size: 18px;
				font-weight: bolder;
				float: left;
			}

			.workpage_lefttext {
				color: darkgrey;
				float: left;
			}

			.workpage_lefttext1 {
				float: right;
			}

			#workpage_lefttable {
				margin-left: 25px;
				width: 320px;
				height: auto;
				border-bottom: 1px solid darkgrey;
				float: left;
			}

			.workpage_lefttop {
				width: 320px;
				height: 280px;
				margin-left: 25px;
				float: left;
			}

			#workpage_tree {
				width: 320px;
				height: 40px;
				font-size: 16px;
				font-weight: bold;
				line-height: 40px;
				float: left;
			}

			#workpage_tree1 {
				width: 320px;
				float: left;
				padding-left: 16px;
				padding-right: 16px;
			}

			.workpage_treepic {
				width: 30px;
				height: 16px;
				float: left;
				background-image: url(img/三角标.png);
				background-repeat: no-repeat;
				background-position: left;
				padding-right: 20px;
				padding-top: 10px;
			}

			.workpage_treepic2 {
				width: 40px;
				height: 30px;
				float: left;
				background-image: url(img/位置.png);
				background-repeat: no-repeat;
				background-position: right;
				padding-left: 150px;
			}

			#workpage_treetext {
				float: left;
				font-size: 20px;
				font-weight: bold;
			}

			#workpage_tree2 {
				width: 320px;
				height: 242px;
				float: left;
				padding-left: 16px;
				padding-right: 16px;
				padding-top: 5px;
			}

			#workpage_treetext2 {
				float: left;
				font-size: 20px;
				font-weight: bold;
				padding-left: 50px;
			}

			.workpage_treepic3 {
				width: 40px;
				height: 30px;
				float: left;
				background-image: url(img/位置2.png);
				background-repeat: no-repeat;
				background-position: right;
				padding-left: 150px;
			}
			.workpage_bottom{
				width: 320px;
				height: 272px;
				float: left;
				margin-left: 20px;
				border-top: 1px solid darkgrey;
				padding-top: 20px;
			}
			#bottomtext1{
				font-size: 16px;
				font-weight: bold;
				float: left;
				margin-left: 20px;
			}
			#bottomtext2{
				font-size: 16px;
				float: right;
				margin-right: 20px;
			}
			#zongbinghai{
				width: 132px;
				height: 164px;
				float: left;
				padding-left: 20px;
			}
			#shuoming{
				width: 128px;
				height: 140px;
				float: left;
				margin-left: 15px;
				margin-top: 10px;
			}
			#bottom_text{
				font-size: 12px;
				color: #A6A6A6;
				float: left;
				padding-left: 20px;
				padding-right: 20px;
			}
			.workpage_sub{
				width: 1120px;
				height: 800px;
				background: url(img/realtime.png);
				background-repeat: no-repeat;
				background-size: 1120px 700px;
				float: right;
				overflow: hidden;
				position: relative;
			}
			#default_button {
				position: absolute;
				left: 1075px;
				top: 80px;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="workpage_nav">
			<div id="img_box"><img src="img/workpage_logo.png" class="workpage_navlogo" /></div>
			<div class="workpage_navbar">
				<ul class="workpage_navbar1">
					<li class="workpage_navbar2">首页</li>
					<li><a href="">项目管理</a></li>
					<li><a href="">巡检航线</a></li>
					<li><a href="">数据统计</a></li>
					<li><a href="">人员管理</a></li>
				</ul>
			</div>
			<div class="workpage_navinf">
				<ul class="workpage_navinf1">
					<li  class="workpage_navinf2"><img src="img/workpage_head.png" alt="" width="32px" height="32px" /></li>
					<li><span>2024-07-18 星期四</span></li>
					<li><span>适飞环境：</span><span id="workpage_text">优</span></li>
					<li id="img_span" ><span>32°C</span></li>
				</ul>
			</div>
		</div>
		<div id="workpage_left">
			<div>
				<div id="workpage_lefttop"><span>铜陵大桥</span>
					<table id="workpage_lefttable">
						<tr>
							<td class="workpage_lefttext">路线编号</td>
							<td class="workpage_lefttext1">G330 K816+060-K820+276</td>
						</tr>
						<tr>
							<td class="workpage_lefttext">项目数量</td>
							<td class="workpage_lefttext1">1个</td>
						</tr>
						<tr>
							<td class="workpage_lefttext">营养单位</td>
							<td class="workpage_lefttext1">铜陵长江公路大桥管理处</td>
						</tr>
					</table>
				</div>
				<div class="workpage_lefttop">
					<div id="workpage_tree">&nbsp;&nbsp;&nbsp;&nbsp;项目树</div>
					<div id="workpage_tree1">
						<div class="workpage_treepic"></div>
						<div id="workpage_treetext">铜陵大桥</div>
						<div class="workpage_treepic2"></div>
					</div>
					<div id="workpage_tree2">
						<div id="workpage_treetext2">铜陵大桥</div>
						<div class="workpage_treepic3"></div>
					</div>
				</div>
				<div class="workpage_bottom">
					<div>
						<div id="bottomtext1">病害统计</div>
						<div id="bottomtext2">技术状况等级：2类</div>
					</div>
					<div id="zongbinghai"><img src="img/总病害.png" width="132px" height="164px" /></div>
					<div id="shuoming"> <img src="img/说明.png" width="128px" height="140px" /></div>
					<div id="bottom_text">*本数据均来自无人机拍摄图片分析得出，数据详情请咨询养护单位。</div>
				</div>
			</div>
		</div>
		<div class="workpage_sub">
			<div id="default_button">
				<a href="workpage_default.html">
					<button>
						<img src="img/default_button.png" width="32px" height="32px" />
					</button>
				</a>
			</div>
		</div>
	</body>
</html>